<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
    />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <link rel="stylesheet" href="LESS/index2.css" />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/css/swiper.min.css"
    />
    <!--<script src="lib/zepto/zepto.min.js"></script>-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/js/swiper.js"></script>
    <style>
      .swiper-container {
        width: 100%;
        /*height: 300px;*/
      }
      .swiper-slide a {
        width: 100%;
      }
      .swiper-slide a img {
        width: 100%;
      }
    </style>
  </head>
  <body>
    <div class="sn_container">
      <header class="sn_topBar">
        <a href="" class="icon icon_category"></a>
        <form action="">
          <span class="icon icon_search"></span>
          <input type="search" placeholder="60寸电视免费拿" />
        </form>
        <a href="" class="icon icon_car"></a>
      </header>

      <!--<div class="sn_banner swiper-container">-->
      <!--<ul class="swiper-wrapper">-->
      <!--<li class="swiper-slide"><a href=""><img src="images/banner01.jpg" alt=""></a></li>-->
      <!--<li class="swiper-slide"><a href=""><img src="images/banner02.jpg" alt=""></a></li>-->
      <!--<li class="swiper-slide"><a href=""><img src="images/banner03.jpg" alt=""></a></li>-->
      <!--<li class="swiper-slide"><a href=""><img src="images/banner04.jpg" alt=""></a></li>-->
      <!--<li class="swiper-slide"><a href=""><img src="images/banner05.jpg" alt=""></a></li>-->
      <!--</ul>-->
      <!--<div class="swiper-pagination"></div>-->
      <!--<div class="swiper-button-prev"></div>-->
      <!--<div class="swiper-button-next"></div>-->
      <!--&lt;!&ndash;<ul class="clearFix">&ndash;&gt;-->
      <!--&lt;!&ndash;<li class="now"></li>&ndash;&gt;-->
      <!--&lt;!&ndash;<li></li>&ndash;&gt;-->
      <!--&lt;!&ndash;<li></li>&ndash;&gt;-->
      <!--&lt;!&ndash;<li></li>&ndash;&gt;-->
      <!--&lt;!&ndash;<li></li>&ndash;&gt;-->
      <!--&lt;!&ndash;</ul>&ndash;&gt;-->
      <!--</div>-->

      <div class="swiper-container">
        <div class="swiper-wrapper">
          <div class="swiper-slide">
            <a href=""><img src="images/banner01.jpg" alt="" /></a>
          </div>
          <div class="swiper-slide">
            <a href=""><img src="images/banner02.jpg" alt="" /></a>
          </div>
          <div class="swiper-slide">
            <a href=""><img src="images/banner03.jpg" alt="" /></a>
          </div>
          <div class="swiper-slide">
            <a href=""><img src="images/banner04.jpg" alt="" /></a>
          </div>
          <div class="swiper-slide">
            <a href=""><img src="images/banner05.jpg" alt="" /></a>
          </div>
        </div>
        <div class="swiper-pagination"></div>
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
      </div>

      <div class="sn_nav">
        <ul class="clearFix">
          <li>
            <a href=""
              ><img src="images/nav01.png" alt="" />
              <p>分类</p></a
            >
          </li>
          <li>
            <a href=""
              ><img src="images/nav02.png" alt="" />
              <p>分类</p></a
            >
          </li>
          <li>
            <a href=""
              ><img src="images/nav03.png" alt="" />
              <p>分类</p></a
            >
          </li>
          <li>
            <a href=""
              ><img src="images/nav04.png" alt="" />
              <p>分类</p></a
            >
          </li>
          <li>
            <a href=""
              ><img src="images/nav05.png" alt="" />
              <p>分类</p></a
            >
          </li>
          <li>
            <a href=""
              ><img src="images/nav01.png" alt="" />
              <p>分类</p></a
            >
          </li>
          <li>
            <a href=""
              ><img src="images/nav02.png" alt="" />
              <p>分类</p></a
            >
          </li>
          <li>
            <a href=""
              ><img src="images/nav03.png" alt="" />
              <p>分类</p></a
            >
          </li>
          <li>
            <a href=""
              ><img src="images/nav04.png" alt="" />
              <p>分类</p></a
            >
          </li>
          <li>
            <a href=""
              ><img src="images/nav05.png" alt="" />
              <p>分类</p></a
            >
          </li>
        </ul>
      </div>

      <footer class="sn_tabs">
        <ul>
          <li>
            <a href=""
              ><span class="fa fa-home"></span>
              <p>首页</p></a
            >
          </li>
          <li>
            <a href=""
              ><span class="fa fa-reorder"></span>
              <p>分类</p></a
            >
          </li>
          <li>
            <a href=""
              ><span class="fa fa-file-text-o"></span>
              <p>必抢清单</p></a
            >
          </li>
          <li>
            <a href=""
              ><span class="fa fa-user"></span>
              <p>我的易购</p></a
            >
          </li>
          <li>
            <a href=""
              ><span class="fa fa-suitcase"></span>
              <p>新手大礼包</p></a
            >
          </li>
        </ul>
      </footer>
    </div>
    <script>
      var mySwiper = new Swiper('.swiper-container', {
        //            direction: 'vertical', // 垂直切换选项
        loop: true, // 循环模式选项
        // 如果需要分页器
        pagination: {
          el: '.swiper-pagination',
        },
        // 如果需要前进后退按钮
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
        },
        autoplay: true,
        autoHeight: true,
        speed: 3000,
      })
    </script>
  </body>
</html>
